import React, {useContext} from 'react'
import {ColorContext, UPDATE_COLOR, RESET_COLOR} from './color'

export default function Buttons() {
  const {dispatch} = useContext(ColorContext)
  return (
    <div>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'red'})}>红色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'orange'})}>橙色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'yellow'})}>黄色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'green'})}>绿色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'cyan'})}>青色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'blue'})}>蓝色</button>
      <button onClick={() => dispatch({type: UPDATE_COLOR, data: 'purple'})}>紫色</button>
      <button onClick={() => dispatch({type: RESET_COLOR})}>重置</button>
    </div>
  )
}
